<template>
    <div class='integralDetails'>
        <el-drawer :title="title" visible @close="$emit('close');$emit('load')" size="1200px" :wrapperClosable="false">
            <div class="add-main box" v-loading="loading">
                <el-descriptions class="margin-top decs" direction="vertical" :column="6" :size="size"
                    :labelStyle="rowCenter" border>
                    <el-descriptions-item>
                        <template slot="label">
                            用户账号
                        </template>
                        <span class="p">11111</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            用户昵称
                        </template>
                        <span class="p">222222</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            会员等级
                        </template>
                        <span class="p">333333</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            可用蔚蓝币
                        </template>
                        <span class="p">44444</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            历史蔚蓝币
                        </template>
                        <span class="p">44444</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            成长值
                        </template>
                        <span class="p">44444</span>
                    </el-descriptions-item>
                </el-descriptions>
                <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch"
                    class="search-con mt20">
                    <el-form-item label="优币来源：" prop="key_name" style="margin-right:25px;">
                        <el-input v-model="queryParams.key_name" placeholder="优币来源" clearable size="small" />
                    </el-form-item>
                    <el-form-item label="操作时间：" prop="key_range" style="margin-right:25px;">
                        <el-date-picker v-model="queryParams.key_range" type="daterange" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
                            placeholder="请选择操作时间范围" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport"
                            v-hasPermi="['customer:manage:export']">导出
                        </el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">

                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
                <el-table border v-loading="loading" :data="tableList" ref="tableList" v-tableHeight
                    :height="tableList &&tableList.length > 0 ? '900px' : '120px'">
                    <el-table-column label="蔚蓝币来源" align="center" prop="mobile" />
                    <el-table-column label="蔚蓝币变化" align="center" prop="mobile" />
                    <el-table-column label="时间" align="center" prop="mobile" />
                    <el-table-column label="备注" align="center" prop="mobile" />
                </el-table>
                <pagination v-show="pageCount > 0" :pageCount="pageCount" :page.sync="queryParams.page"
                    :limit.sync="queryParams.limit" @pagination="getList" />
            </div>
        </el-drawer>
    </div>
</template>

<script>
    export default {
        name: 'integralDetails',
        props: {
            handleShow: {
                type: String, //currency蔚蓝币growth成长值
                default: ""
            },
        },
        components: {

        },

        data() {
            return {
                title: this.handleShow == 'currency' ? "蔚蓝币明细" : "成长值明细",
                loading: false,
                size: 'mini',
                form: {},
                rowCenter: {
                    "text-align": "center"
                },
                total: 0,
                pageCount: 0,
                queryParams: {
                    page: 1,
                    limit: 20,
                    key_name: null,
                },
                tableList: [
                    {}
                ],
                showSearch: true,
            }
        },
        created() {

        },
        methods: {
            getList() {
                // this.loading = true;
                // getHospLists(this.queryParams).then(res => {
                //     this.tableList = res.data ? res.data.lists : [];
                //     this.pageCount = res.data.pageCount;
                //     this.loading = false;
                // });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('是否确认导出所有数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    // return exportBanner(queryParams);
                }).then((response) => {
                    // this.download(response.msg);
                });
            },
            handleQuery() {
                this.queryParams.page = 1;
                this.getList();
            },
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
        },
    }

</script>
<style scoped lang='scss'>
    .p {
        display: block;
        font-size: 12px;
        text-align: center;
    }
</style>